
import { Row, Col, Button, Modal, Form, Input, message, Table, Tag, Popconfirm, Select } from "antd"
import { observer } from "mobx-react"
import { useRef, useState, useEffect } from "react"
import { $http } from "../../api"
import { mbdata } from "../../mobx/data"
import { DeleteOutlined } from '@ant-design/icons';
const { Option } = Select
const { Search } = Input
function BanjiCpt() {
  const [show, setShow] = useState(false)
  const [yearList, setYearList] = useState([])
  const [numList, setNumList] = useState([])

  const form = useRef()

  const handleOk = () => {
    form.current.validateFields()
      .then(value => {
        $http.addbanji({
          ...value
        })
          .then(res => {
            if (res.code == 200) {
              getBanjiList()
              setShow(false)
              form.current.resetFields()
            }
          })
      })
      .catch(err => {
        message.error("请输入有效的数据信息")
      })
  }


  const getBanjiList = () => {
    $http.getbanjis()
      .then(res => {
        if (res.code == 200) {
          mbdata.changebanjiList(res.result)
        }
      })
  }

  const handleCancel = () => {
    setShow(false)
    form.current.resetFields()
  }

  useEffect(() => {
    getXuekeList()

    if (!mbdata.banjiList.length > 0) {
      getBanjiList()
    }

    var time = new Date()
    var year = time.getFullYear().toString().slice(2, 4) * 1
    var years = []
    for (var i = year - 1; i < year + 10; i++) {
      years.push(i)
    }
    var nums = []
    for (var i = 1; i < 20; i++) {
      nums.push(i < 10 ? "0" + i : i)
    }
    setYearList([...years])
    setNumList([...nums])
  }, [])

  const getXuekeList = () => {
    $http.getxueke()
      .then(res => {
        if (res.code == 200) {
          mbdata.changexuekeList(res.result)
        }
      })
  }

  const deleteOne = (item) => {
    $http.delbanji({
      _id: item._id
    })
      .then(res => {
        if (res.code == 200) {
          var arr = mbdata.banjiList.filter(val => val._id != item._id)
          mbdata.changebanjiList(arr)
        }
      })
  }

  const columns = [
    {
      title: "#",
      align: "center",
      render: (value, item, index) => {
        return (index + 1)
      }
    },
    {
      title: "班级名称",
      align: "center",
      render: (value, item, index) => {
        return (
          <Tag color="orange">
            {item.text}
          </Tag>
        )
      }
    },
    {
      title: "班级编码",
      align: "center",
      render: (value, item, index) => {
        return (
          <Tag color="pink">
            {item.value}
          </Tag>
        )
      }
    },
    {
      title: "所属学科",
      align: "center",
      render: (value, item, index) => {
        return (
          <Tag color="#6ff">
            {item.xueke}
          </Tag>
        )
      }
    },
    {
      title: "操作",
      align: "center",
      render: (value, item, index) => {
        return (
          <Popconfirm
            title={'你真的要删除吗?'}
            onConfirm={() => deleteOne(item)}
            okText="确认"
            cancelText="取消"

          >
            <Button type="danger" shape="circle" icon={<DeleteOutlined />} size={30} ></Button>
          </Popconfirm>
        )
      }
    },
  ]


  const startSearch = value => {
    $http.getbanjis({
      keyword: value
    })
      .then(res => {
        if (res.code == 200) {
          mbdata.changebanjiList(res.result)
        }
      })
  }
  return (
    <div>
      <h2> 班级管理</h2>
      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={18} style={{ display: 'flex' }}>
          <Button type="primary" onClick={() => setShow(true)}>添加班级</Button>
        </Col>
      </Row>

      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={10} style={{ display: 'flex' }}>
          <Search placeholder="请输入搜索关键字" enterButton onSearch={startSearch} />

        </Col>
      </Row>


      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={18} style={{ display: 'flex' }}>
          <Table
            dataSource={mbdata.banjiList}
            columns={columns}
            bordered
            id="table"
            rowKey={item => item._id}
            pagination={{ pageSize: 6 }}
          >

          </Table>
        </Col>
      </Row>

      <Modal title="添加班级"
        visible={show}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="添加"
        cancelText="取消"
        style={{ width: 240 }}
      >
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
          }}
          ref={form}
          layout={"vertical"}
          style={{ maxWidth: 240 }}
        >
          <Form.Item
            name="xueke"
            label="所属学科"
            rules={[
              {
                required: true,
                message: '请选择学科',
              },
            ]}
          >
            <Select placeholder="请选择学科">
              {
                mbdata.xuekeList.map((l, i) => (
                  <Option key={i} value={l.value}>
                    {l.text}
                  </Option>
                ))
              }
            </Select>
          </Form.Item>

          <Form.Item
            name="year"
            label="年份"
            rules={[
              {
                required: true,
                message: '请选择',
              }
            ]}
          >
            <Select placeholder="请选择年份">
              {
                yearList.map((l, i) => (
                  <Option key={i} value={l}>
                    {l}
                  </Option>
                ))
              }
            </Select>
          </Form.Item>

          <Form.Item
            name="num"
            label="班级序号"
            rules={[
              {
                required: true,
                message: '请选择',
              }
            ]}
          >
            <Select placeholder="请选择班级序号">
              {
                numList.map((l, i) => (
                  <Option key={i} value={l}>
                    {l}
                  </Option>
                ))
              }
            </Select>
          </Form.Item>
        </Form>
      </Modal>

    </div>
  )
}


export default observer(BanjiCpt)